/**
 * @Author: easten
 * @Created: 2024-04-15 23:48:14
 * @Description:
 *
 */
import { ApiPermission, ApiRole } from "_common/api/sys";
import { SysPermission, SysRole } from "_common/entity";
import { AxiosInstance } from "axios";
import React, { useState, useEffect } from "react";
import { Drawer, MessagePlugin, Tree } from "tdesign-react";
import { relationNodeArray2Tree } from "utils/treeUtil";
type PermissionDrawerProps = {
  axios: AxiosInstance;
  open?: boolean;
  value?: SysRole;
  onClose?: (value: boolean) => void;
};
const PermissionDrawer: React.FC<PermissionDrawerProps> = (
  props: PermissionDrawerProps
) => {
  const { open, onClose, value, axios } = props;
  const [checkable, setCheckable] = useState(true);
  const [checkStrictly, setCheckStrictly] = useState(false);

  // 权限平状数据
  const [platData, setPlatData] = useState<SysPermission[]>([]);
  // 权限树形数据
  const [treeData, setTreeData] = useState<SysPermission[]>([]);
  // 选中的keys
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const apiPermission = new ApiPermission(axios!);
  const apiRole = new ApiRole(axios!);
  const handleChange = (checked: any) => {
    setSelectedKeys(checked);
  };

  useEffect(() => {
    getPermissions();
    getRolePermissionIds();
    return () => {
      setPlatData([]);
      setTreeData([]);
      setSelectedKeys([]);
    };
  }, [value]);

  // 获取所有的权限列表
  const getPermissions = async () => {
    const response = await apiPermission.getList();
    if (response && response.code === 200 && response.data) {
      const treeArr = relationNodeArray2Tree(response.data);
      setTreeData(treeArr as any);
    }
  };

  // 获取当前角色的权限
  const getRolePermissionIds = async () => {
    const response = await apiRole.getRolePermission(value?.id!);
    if (response && response.code === 200 && response.data) {
      setSelectedKeys(response.data);
    }
  };

  const handleClose = () => {
    onClose?.(false);
  };

  // 确认保存
  const handleConfirm = async () => {
    const response = await apiRole.rolePermission({
      roleId: value?.id,
      permissionIds: selectedKeys,
    });
    if (response && response.code === 200 && response.data) {
      MessagePlugin.success("授权成功");
      onClose?.(false);
    }
  };
  // 获取code
  const getCode = (node: any) => {
    return platData.find((item) => item.id === node.value)?.fullCode;
  };
  const renderLabel = (node: any) => (
    <div>
      <span>{`${node.label}`}</span>
      <span className="ml-5 text-emerald-500 text-l">{getCode(node)}</span>
    </div>
  );
  return (
    <Drawer
      header={`角色授权`}
      visible={open}
      sizeDraggable
      size="45%"
      onClose={handleClose}
      onConfirm={handleConfirm}
    >
      <div className="p-4 bg-gray-600 bg-opacity-15 border-l-4 mb-3 border-l-orange-500">
        当前角色：{value?.name}
      </div>
      <Tree
        className="m-3"
        expandLevel={1}
        hover
        data={treeData}
        checkable={checkable}
        keys={{
          label: "name",
          value: "id",
          children: "children",
        }}
        value={selectedKeys}
        checkStrictly={checkStrictly}
        valueMode={"all"}
        onChange={handleChange}
        label={renderLabel}
      />
    </Drawer>
  );
};
export default PermissionDrawer;
